<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript"src="ccay/example/functionDemo/attachment/attachment.js" charset="utf-8"></script>
<div id="attachmentDemo">
	<div title="API">
		<div>
			<h2>Ccay.Component.openUploadDialog = function(title, param, width, height);</h2>
			<h3>作用：attachment 附件控件接口</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row">
							<samp><h3>参数</h3></samp> 
							<span class="ccay-form-input"><h3>描述</h3></span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="title"></samp> 
							<span class="ccay-form-input">
								{String}
								<p> 附件控件对话框标题
							</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="param"></samp> 
							<span class="ccay-form-input">
								<div class="ccay-form-body">
									  <ul>
									  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="参数项"></samp>
										 	<span class='ccay-form-input'>说明</span>
										  </li>
									  </ul>
								</div>
							        <div class="ccay-form-custom">
									  <ul>
									      
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="uploadType"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>上传类型，附件类为Attachment 
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="callback"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>单个文件上传回调函数
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="completeCallback"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>所有文件上传结束的回调函数
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="userObject"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>用户对象，上传完可以回传此对象
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="needBatchId"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>需要批ID，附件上传时请指定为true
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="batchId"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>当前批次ID
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="query"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>上传参数，此参数可以在服务器端接收，其中attType由附件处理类处理，标示附件类型.附件类型配置在数据字典的App.Attachment节点下，每种类型配置fileTypes（如xls,xlsx,doc,docsx,zip,rar），maxSize，maxCount三个节点的Value
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="fileType"></samp>
										 	<span class='ccay-form-input'>
										 	  参数值all浏览文件窗口显示"所有文件",参数值非all或不传该参数浏览文件窗口显示"自定义文件" 
										 	</span>
										 </li>
									 </ul>
							       </div>
							</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="width"></samp> 
							<span class="ccay-form-input">
								{Integer}
								<p> 附件控件对话框宽度
							</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="height"></samp> 
							<span class="ccay-form-input">
								{Integer}
								<p> 附件控件对话框高度
							</span>
						</li>
					</ul>
				</div>
			</form>
		</div>
		<h3 style="padding-top:20px;color:red;"></h3>
	</div>
	<div title="Demo">
	<h3>效果展示：</h3>
	<div>
 		<div><input type="button" class="jbutton" onclick="Ccay.example.functionDemo.attachment.openDialog()" value="Open Dialog"></div>
 		<div id="tempFileList"></div>
 	</div>
 	<br/>
 	<form id="bizForm">	 	
 		<span for="attachmentBatchId">Batch ID:</span><input type="text" name="attachmentBatchId" />
 		<input type="button" class="jbutton"  onclick="Ccay.example.functionDemo.attachment.listFile()" value="List File"/>
 		<input type="button" class="jbutton"  onclick="Ccay.example.functionDemo.attachment.listFileWithUrl()" value="List File With Url"/>	 	
 		<div id="fileList"></div>
 	</form>
 	<br>
 	<div><span>说明："Open Dialog"按钮打开附件管理对话框；
 	"List File"按钮根据输入框中的Batch Id到数据库中查询附件，并将结果以列表的形式显示；
 	"List File With Url"按钮在"List File"按钮的显示效果基础上，为每条附件记录增加了带有指向附件的链接和删除附件的链接。
 	可以输入batch id：12279 查看效果。
 	</span></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
<pre id='html'>
&lt;div>
	&lt;input type="button" class="jbutton" onclick="testOpenDialog()" value="Open Dialog">
	&lt;div id="testTempFileList">&lt;/div>
&lt;/div>
&lt;form id="testBizForm">	 	
	&lt;span for="testAttachmentBatchId">Batch ID:&lt;/span>&lt;input id="testAttachmentBatchId" type="text" name="attachmentBatchId" />
	&lt;input type="button" class="jbutton"  onclick="testListFile()" value="List File"/>
	&lt;input type="button" class="jbutton"  onclick="testListFileWithUrl()" value="List File With Url"/>	 	
	&lt;div id="testFileList">&lt;/div>
&lt;/form>
</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
<pre id='js'>
var testUploadDemoGrid; 
testOpenDialog=function(){
	var param={
		/*上传类型，附件类为Attachment*/
		uploadType:"Attachment",
		/*单个文件上传回调函数*/
		callback:testDemoCallback,
		/*所有文件上传结束的回调函数*/
		completeCallback:testCompleteCallback,
		/*用户对象，上传完可以回传此对象*/
		userObject: {rowId:123456}, 			
		closeDialog:true,
		/*需要批ID，附件上传时请指定为true*/
		needBatchId:true,
		/*当前批次ID*/
		batchId:$S("input[name='testAttachmentBatchId']").val(),
		/*上传参数，此参数可以在服务器端接收。attType由附件处理类处理，标示附件类型，
		 *附件类型配置在数据字典的App.Attachment节点下，每种类型配置fileTypes（如xls,xlsx,doc,docsx,zip,rar），maxSize，maxCount三个节点的Value
		 */
		query:"attType=AttachmentDemo"
	};
	Ccay.Component.openUploadDialog("Attachment Demo",param);
};
/*单个文件上传回调函数*/
function testDemoCallback(file,serverData,batchId,userObject){
	Ccay.UI.showMessage("File uploaded for batch:" + batchId + " ,rowId:" +userObject.rowId ,"success" );
	$S("#testAttachmentBatchId").val(batchId);	
	$S("#testTempFileList").html($S("#testTempFileList").html() + "&lt;p>{0}-&lt;a href='javascript:void(0)' onclick='deleteFile(\"{1}\",null,this)'>Delete&lt;/a>&lt;/p>".formatValue(decodeURI(serverData[0].fileName),serverData[0].deleteUrl));		
}
/**
 * 上传文件成功后，清除当前文件
 */
deleteFile = function(delUrl,data,obj){
	Ccay.doDelete(delUrl,data,function(){
		$(obj).parent().remove();
	});
};
/*所有文件上传结束的回调函数*/	
function testCompleteCallback(files, batchId, userObject){
	Ccay.UI.topBox("File upload complete for batchId:" + batchId  + " ,rowId:" +userObject.rowId);
}
/*"List File"按钮触发函数*/
testListFile = function(){
	Ccay.doGet("services/ccay/demo/attachment/biz/single/nourl",$S("#testBizForm").jsonData(),function(result){
		JSON.stringify(result);
		JSON.stringify($S("#testFileList"));
		$S("#testFileList").html("");
		var list  = "&lt;ul>";
		for(var i =0; i < result.attachments.length ; i++){
			list += "&lt;li>{0}&lt;/li>".formatValue(result.attachments[i].fileName); 
		}
		list +="&lt;/ul>";
		$S("#testFileList").html(list);
	});
};
/*"List File With Url"按钮触发函数*/
testListFileWithUrl = function(){
	Ccay.doGet("services/ccay/demo/attachment/biz/single/withurl",$S("#testBizForm").jsonData(),function(result){
		$S("#testFileList").html("");
		var list  = "&lt;ul>";
		for(var i =0; i < result.attachments.length ; i++){
			list += "&lt;li>&lt;a href='{0}'>{1}&lt;/a>-&lt;a href='javascript:void(0)' onclick='deleteFile(\"{2}\",null,this);'>delete&lt;/a>&lt;/li>".formatValue(
			result.attachments[i].downloadUrl,result.attachments[i].fileName,result.attachments[i].deleteUrl); 
		}
		list +="&lt;/ul>";
		$S("#testFileList").html(list);
	});
};
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#attachmentDemo',$('#js').html(),$('#html').html())">试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>